<template>
  <view class="package_sale space-between">
    <view class="center" v-if="userInfo.userInfor">
       <image :src="userInfo.userInfor.avatar?userInfo.userInfor.avatar:avatar" mode="" style="width:60rpx;height:60rpx;border-radius: 50%;"></image>
      <view style="margin:0px 20rpx;">
        {{userInfo.userInfor.status==='1'?userInfo.userInfor.fill_name:userInfo.userInfor.status_text}}
      </view>
     <!-- <image src="../../../static/saleIcon/icon/down.svg" mode="" style="width:35rpx;height:35rpx;" @click="openPop()"
        :style="{transform:show?'rotate(180deg)':'rotate(0deg)'}"></image> -->
    </view>
    <!-- <view style="position: relative;" @click="navTo('Sale/Information/newList')">
      <image :src="smallBell" mode="" style="width: 60rpx;height: 60rpx;"></image>
      <text class="drop"></text>
    </view> -->
    <uni-icons type="scan" size="30" @click="scanCode()"></uni-icons>
  </view>
  <!-- 加注机列表 -->
  <uni-popup ref="popup" type="bottom" style="z-index: 910" @maskClick="maskClick()">
    <scroll-view scroll-y="true" enable-back-to-top class="scroll-box">
      <view class="space-between list" v-for="item in fillAll" :key="item.id" @click="cueChan(item)">
        <view>{{item.fill_name}}<text v-if="item.staff_name">（{{item.staff_name}}）</text></view>
        <view class="but" v-if="item.staff_id!=0">使用中</view>
        <view class="but" v-else style="border-color: #1D8DFF;color:#1D8DFF;">{{text}}</view>
      </view>
    </scroll-view>
  </uni-popup>
  <!-- 选中 -->
  <uni-popup ref="Selected" type="center" style="z-index: 910" @maskClick="maskClick()">
    <view class="package_sale column fill">
      <view>{{operate.fill_name}}</view>
      <view style="margin:20rpx 0px 0px;" v-if="operate.staff_name">正在被{{operate.staff_name}}使用是否继续上机</view>
      <view class="center bnt" style="margin-top:30rpx;">
        <view @click="selectClose()">取消</view>
        <view @click="employment()">确定</view>
      </view>
    </view>
  </uni-popup>
  <!-- 切换 -->
  <uni-popup ref="switchCut" type="center" style="z-index: 910" @maskClick="maskClick()">
    <view class="package_sale column fill">
      <view style="margin-bottom: 30rpx;">{{userInfo.userInfor.fill_name}}</view>
      <view class="center bnt">
        <view @click="blockedOut(1)">下机</view>
        <view @click="blockedOut(2)">切换</view>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { navTo } from '@/utils/navigator';
  import { avatar } from '@/utils/Statics';
  import { work1, work2, smallBell } from '@/utils/Statics';
  import { useUserInformation } from '@/stores/earthPushing/userSale';
  import { getFillList } from '@/gql/earthPushing/user';
  import { scanQRCode } from '@/utils/wechat.jssdk';
  import { toPublish } from '@mqtt';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const userInfo = useUserInformation();
  const show = ref(false)
  // 加注机列表
  const popup = ref(null)
  // 选中
  const Selected = ref(null)
  // 切换
  const switchCut = ref(null)

  const fillAll = ref()
  const text = ref('上机')
  const operate = ref()
  // 获取加注机列表
  function fillList() {
    showLoading()
    const payload = {
      query: getFillList,
      variables: {
        delivery_id: userInfo.delevery_id,
      },
    };
    toPublish('ql/staff/getFillList',
      payload,
      (obj : any) => {
        const { getFillList } = obj.data;
        fillAll.value = getFillList
      },
    );
  }
  // 开关加注机列表
  function openPop() {
    show.value = !show.value
    if (userInfo.userInfor.status === '1') {
      switchCut.value.open()
    } else {
      fillList()
      text.value = '上机'
      popup.value.open()
    }
  }
  //切换下机
  function blockedOut(num : number) {
    switchCut.value.close()
    switch (num) {
      case 1:
        show.value = !show.value
        showLoading('正在提交');
        const payload = {
          staff_id,
          fill_id: 0
        };
        toPublish('staff/cleanStaffFill', payload, (obj : any) => {
          const { code, msg } = obj;
          if (code === 1) {
            userInfo.getUserInfo();
            successToast(msg);
          } else {
            errorToast(msg);
          }
        });
        break;
      case 2:
        fillList()
        text.value = '切换'
        popup.value.open()
        break;
    }
  }
  function cueChan(item : any) {
    operate.value = item
    popup.value.close()
    Selected.value.open()
  }
  // 上机
  function employment() {
    showLoading('正在提交');
    const payload = {
      staff_id,
      fill_id: operate.value.fill_id,
    };
    toPublish('staff/setStaffFill', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        userInfo.getUserInfo();
        successToast(msg);
        selectClose()
      } else {
        errorToast(msg);
      }
    });
  }
  function openClose() {
    show.value = !show.value
    popup.value.close()
  }
  // 开关正在使用的加注排挤掉
  function selectPop() {
    show.value = !show.value
    Selected.value.open()
  }
  function selectClose() {
    show.value = !show.value
    Selected.value.close()
  }
  //切换某一台加注机
  function switchPop() {
    show.value = !show.value
    switchCut.value.open()
  }
  function switchClose() {
    show.value = !show.value
    switchCut.value.close()
  }
  function maskClick() {
    show.value = !show.value
  }
  function scanCode() {
    scanQRCode((res : any) => {
      const num = res.resultStr.split('user_')[1];
      if (num) {
        navTo('Sale/customer/customerDeatil?id=' + num)
      } else {
        alert('请扫描正确的二维码');
      }
    });
  }
</script>
<style scoped lang="less">
  .scroll-box {
    width: 100%;
    height: 600rpx;
    background-color: #fff;
    padding: 30rpx 30rpx 0px;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0px 0px;

    .list {
      padding: 20rpx 0px;
      box-sizing: border-box;

      .but {
        width: 162rpx;
        height: 52rpx;
        border: 1px solid #666666;
        border-radius: 26px;
        text-align: center;
        line-height: 52rpx;
      }
    }
  }

  .drop {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: #FF6565;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .fill {
    width: 600rpx;
    border-radius: 5px;
    padding: 30rpx 20rpx 50rpx;
    box-sizing: border-box;

    .bnt {
      width: 100%;
      justify-content: space-around;
      margin-top: 20rpx;

      view {
        width: 245rpx;
        height: 68rpx;
        border: 1px solid #2694FB;
        border-radius: 35px;
        text-align: center;
        line-height: 68rpx;
        color: #fff;
        box-sizing: border-box;
      }

      view:nth-of-type(1) {
        color: #2694FB;
      }

      view:nth-of-type(2) {
        background: #2694FB;
      }
    }
  }
</style>